<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>输入面板</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    .input-panel {
      width: 300px;
      margin: 100px auto;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      background-color: #007BFF;
      /* 蓝色背景 */
    }

    #inputField {
      width: 90%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      resize: vertical;
      /* 允许垂直缩放 */
      background-color: #fff;
      /* 白色背景 */
    }

    .button-group {
      display: flex;
      justify-content: space-between;
    }

    button {
      padding: 10px 15px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    button#confirmButton {
      background-color: #28a745;
      /* 绿色 */
      color: white;
    }

    button#cancelButton {
      background-color: #dc3545;
      /* 红色 */
      color: white;
    }

    .input-panel>.button-group {
      background-color: #0056b3;
      /* 蓝色底部 */
      padding: 10px;
      border-radius: 0 0 8px 8px;
    }
  </style>
</head>

<body>
  <div class="input-panel">
    <textarea id="inputField" placeholder="请输入内容" rows="4"></textarea>
    <div class="button-group">
      <button id="confirmButton">确认</button>
      <button id="cancelButton">取消</button>
    </div>
  </div>

  <script src="script.js"></script>
</body>
<script>
  $(document).ready(function () {
    $('#confirmButton').click(function () {
      const inputValue = $('#inputField').val()
      alert('确认输入: ' + inputValue)
    })

    $('#cancelButton').click(function () {
      $('#inputField').val('')
    })
  });
</script>

</html> 